<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<body>
  <script type="importmap">
    {
      "imports": {
        "Audio": "../dist/index.js"
      }
    }
  </script>

  <script type="module">
    import { RecorderAnalyser } from 'Audio'

    let recorderAnalyser

    function open() {
      recorderAnalyser = new RecorderAnalyser()
      recorderAnalyser.start()
    }
    function draw() {
      console.log(recorderAnalyser && recorderAnalyser.getData())
      requestAnimationFrame(draw)
    }

    document.addEventListener('click', () => {
      if (!recorderAnalyser) {
        open()
        draw()
      }
    })

  </script>
</body>

</html>